No actionable comments were generated in the recent review. 🎉

Walkthrough

This pull request replaces the custom brace expansion implementation in packages/tailwindcss/src/utils/brace-expansion.ts with an external library dependency. The brace-expansion library (version ^5.0.4) is added as a devDependency in packages/tailwindcss/package.json. The public function signature expand(pattern: string): string[] remains unchanged. Internal parsing, sequencing, and recursion logic are removed, with expansion now delegated to the external library. Test expectations are updated to reflect the library's behavior, including zero-padding support in numeric ranges, decimal range handling, and graceful processing of unbalanced braces.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Hey! What kind of issues were you running into that triggered this PR?

Brace expansion is only used for our @source inline('…') feature (https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-variants) and we explicitly don't support certain features because they don't make sense in a Tailwind CSS class context.

For example:

• Zero-padding support: we don't support utilities like w-0001, so it doesn't make sense for us to support this
• Decimal ranges: similar to decimal ranges, we support multiples of .25, but w-1.2 is not supported, so this also doesn't really make sense here.
• Unbalanced braces: this throws on purpose to inform the user that something is wrong
• Built-in DoS protection: Tailwind CSS is not executed at runtime, and the @source inline(…) feature doesn't handle arbitrary inputs except from the hardcoded list in the CSS. Worst case if you manage to get it to expand forever, your memory goes up and/or your dev process crashes. A production website will not be affected.

So I'm really curious about the issues you were running into.

hi @RobinMalfait there wasn't a specific issue, just a codebase exploration for maintenance wins, but your points are well taken, so happy to close this.

No worries, was just interested in what caused this. You did peak my interest with the 2x faster part, so wanted to see where we can make things faster even if this is not a hot-path code. But first, I wanted to gather some data:

On a small pattern like: {text,bg}-{red,green,blue}-{50,{100..900..100},950}, there will be 66 generated classes. In this scenario, the braces-expansion package is ~4.6 times slower than the current implementation:

On a large pattern like: {{xs,sm,md,lg}:,}{border-{x,y,t,r,b,l,s,e},bg,text,cursor,accent}-{{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950},black,white}{,/{0..100}}, there will be 1 493 280 generated classes.

It looked like in this scenario the braces-expansion packages is almost ~2x faster, but that's only because it does indeed cap out at 100k generated classes:

If we increase that limit to a much bigger number, the braces-expansion package is ~10x slower compared to the current implementation:

Here is the exact code I used for the benchmark:

import { expand as braceExpansionExpand } from 'brace-expansion'
import { expand as bracesExpand } from 'braces'
import { expand } from './brace-expansion'

import { bench, boxplot, do_not_optimize, run, summary } from 'mitata'

const PATTERN =
  '{{xs,sm,md,lg}:,}{border-{x,y,t,r,b,l,s,e},bg,text,cursor,accent}-{{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,{100..900..100},950},black,white}{,/{0..100}}'
// const PATTERN = '{text,bg}-{red,green,blue}-{50,{100..900..100},950}'
const braceExpansionExpandOptions = {
  max: 1_500_000,
}

// Verify that the results are the same (at least length wise)
let a = bracesExpand(PATTERN)
let b = braceExpansionExpand(PATTERN, braceExpansionExpandOptions)
let c = expand(PATTERN)

console.log('Results', a.length, b.length, c.length)

summary(() => {
  boxplot(() => {
    bench('npm: `braces`', () => {
      do_not_optimize(bracesExpand(PATTERN))
    })

    bench('npm: `braces-expansion`', () => {
      do_not_optimize(braceExpansionExpand(PATTERN, braceExpansionExpandOptions))
    })

    bench('local: ./brace-expansion', () => {
      do_not_optimize(expand(PATTERN))
    })
  })
})

await run()